import React from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, message,Button } from 'antd';
import { encryptedData, randomPassword } from '@/components/common/PateoForm/utils/helper';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 14 },
  },
}
@connect(state => ({
  account: state.account2,
}))
// @Form.create()
class ResetPwdModel extends React.Component {
  state = {
    visible:false,
    buttonLoading: false,
  };
  componentWillMount() {
  }
  componentDidMount() {
    this.props.onRef(this)
  }
  showModal = (e) => {
    this.props.form.setFieldsValue({
      code: e.code,
      name: e.name,
      password: randomPassword(),
    });
    this.setState({
      visible: true,
    });
  }
  onCancel = () => {
    this.props.form.resetFields();
    this.setState({ visible: false });
  }
  handleOk = (e) => {
    const { dispatch,form } = this.props;
    e.preventDefault();
    form.validateFields({ force: true }, (err, values) => {
      if (err) {
        return;
      };
      this.setState({
        buttonLoading: true,
      });
      const encode = {
        password: encryptedData(Buffer.from(values.password).toString('base64')) };
        dispatch({
          type: 'dealer/resetPassword',
          payload: Object.assign(values, encode),
          callback: (response) => {
            if (response.code === '200') {
              message.success('密码重置成功');
            } else {
              message.error(response.description, 3);
            }
            this.setState({ visible: false,buttonLoading: false, });
          },
        });
    });
  }
  saveFormRef = (form) => {
    this.form = form;
  }

  render() {
    const { account: { rdata = {} } } = this.props;
    const { buttonLoading} = this.state;
    return (
      <Modal
        visible={this.state.visible}
        title="重置密码"
        onOk={this.handleOk}
        onCancel={this.onCancel}
        width={600}
        footer={[<Button key="back" type="ghost" size="large" onClick={this.onCancel}> 取 消 </Button>,
          <Button loading={buttonLoading} key="submit" type="primary" size="large" onClick={this.handleOk}>
            提 交
          </Button>]}
          >
          <Form onSubmit={this.handleSubmit}>
          <FormItem
        {...formItemLayout}
        label="经销商代码"
        name="code"
        rules={[{
          required: true, message: '',
        }]}
          >
            <Input placeholder="" disabled />
          </FormItem>
        <FormItem
          {...formItemLayout}
          label="经销商名称"
          name="name"
          rules={[{
            required: false, message: '',
          }]}
        >
          <Input placeholder="" disabled />
        </FormItem>
        <FormItem
          {...formItemLayout}
          label="重置后密码"
          name="password"
          rules={[{ required: true, message: rdata.descr, pattern: `${rdata.regular}` }]}
        >
          <Input placeholder="" />
        </FormItem>
      </Form>
  </Modal>
    );
  }
}

export default ResetPwdModel;
